<template>
    <div class="card" :style=" 'background-image: url('+ url +');' ">
        <!-- 这是卡片组件 -->
        <div class="card-info">{{type}}/{{len}}</div>
        <div class="card-name">{{name}}</div>
    </div>
</template>


<script>
export default {
    // 组件传参
    props:{
        type: String,
        url: String,
        len: String,
        name:String,
    },
    data(){
        // 返回值就是我们组件的属性
        return {
            // name :"组件A的名字"
        }
    }
}
</script>

<style lang="scss">
    .card {
        // border: 1px solid red;
        height: 300px;
        background-color: #313131;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        color: white;
        padding: 10px;
        // 图片的位置调整
        background-repeat: no-repeat;
        background-size: cover;

        .card-info{

        }
        .card-name{
            font-size: 18px;
            font-weight: 800;
        }
    }
</style>